<template>
  <div class="orderManageDetail pb40">
    <div class="ml30 mr30 mt10 row-spaceb-col-center">
      <div class="fs18">订单详情</div>
      <el-button type="primary" @click="goBack" size="medium" plain>返回</el-button>
    </div>
    <div class="main-container">
      <div class="head">订单状态</div>
      <!-- 状态条 -->
      <div class="block">
            <el-steps :active="orderStep" class="mg30 ml80 mr80" align-center>
              <el-step title="申请服务" icon="#">
                <template #icon>
                  <!-- <img v-if="orderStep>=1" src="@/assets/image/order/1_a.svg">
                  <img v-else src="@/assets/image/order/1.svg"> -->
                  <icon-font v-if="orderStep>=0" size="45" color="#436AF7"  class="icon-shenqingfuwu" />
                  <icon-font v-else size="45" color="#7686A3" class="icon-shenqingfuwu" />
                </template>
              </el-step>
              <el-step title="服务商接单" icon="#">
                <template #icon>
                  <!-- <img v-if="orderStep>=2" src="@/assets/image/order/2_a.svg">
                  <img v-else src="@/assets/image/order/2.svg"> -->
                  <icon-font v-if="orderStep>=1 && orderStep!=6" size="45" color="#436AF7"  class="icon-fuwushangjiedan" />
                  <icon-font v-else size="45" color="#7686A3" class="icon-fuwushangjiedan" />
                </template>
              </el-step>
              <el-step title="签订合同" icon="#">
                <template #icon>
                  <!-- <img v-if="orderStep>=3" src="@/assets/image/order/3_a.svg">
                  <img v-else src="@/assets/image/order/3.svg"> -->
                  <icon-font v-if="orderStep>=2 && orderStep!=6" size="45" color="#436AF7"  class="icon-qiandinghetong" />
                  <icon-font v-else size="45" color="#7686A3" class="icon-qiandinghetong" />
                </template>
              </el-step>
              <el-step title="线上支付" icon="#">
                <template #icon>
                  <!-- <img v-if="orderStep>=4" src="@/assets/image/order/4_a.svg">
                  <img v-else src="@/assets/image/order/4.svg"> -->
                  <icon-font v-if="orderStep>=3 && orderStep!=6" size="45" color="#436AF7"  class="icon-xianshangzhifu" />
                  <icon-font v-else size="45" color="#7686A3" class="icon-xianshangzhifu" />
                </template>
              </el-step>
              <el-step title="完成服务" icon="#">
                <template #icon>
                  <!-- <img v-if="orderStep>=5" src="@/assets/image/order/5_a.svg">
                  <img v-else src="@/assets/image/order/5.svg"> -->
                  <icon-font v-if="orderStep>=5 && orderStep!=6" size="45" color="#436AF7"  class="icon-wanchengfuwu" />
                  <icon-font v-else size="45" color="#7686A3" class="icon-wanchengfuwu" />
                </template>
              </el-step>
              <el-step title="评价服务" icon="#">
                <template #icon>
                  <!-- <img v-if="orderStep>=6" src="@/assets/image/order/6_a.svg">
                  <img v-else src="@/assets/image/order/6.svg"> -->
                  <icon-font v-if="orderStep>=7" size="45" color="#436AF7"  class="icon-fuwupingjia" />
                  <icon-font v-else size="45" color="#7686A3" class="icon-fuwupingjia" />
                </template>
              </el-step>
            </el-steps>
      </div>
      <!-- 申请服务企业信息 -->
      <div class="block">
        <div class="">申请服务信息</div>
        <div class="company-name mt15">
          <i class="el-icon-location fs28 mr10 color-primary"></i>
          <span class="fwbold fs18">{{ orderDetail.companyName }}</span>
        </div>
        <div class="address fs14 ml35 mt15 color-grey"> 联系方式：<span class="color-primary">{{ orderDetail.customerPhoneNum }}</span></div>
      </div>
      <!-- 服务产品信息 -->
      <div class="block">
        <div class="">服务产品信息</div>
        <div class="company-name mt15">
          <i class="el-icon-office-building fs28 mr10 color-primary"></i>
          <span class="fwbold fs18">{{ orderDetail?.serviceName }}</span>
        </div>
        <div class="row-start mt10">
          <!-- <img class="projectIcon" src="@/assets/image/product.png"> -->
           <img :src="`/api/public/file/v1/public/get/${orderDetail?.productImg}`" class="projectIcon" style="max-width:100%; max-height:100%; object-fit:contain;" alt="" @error="setDefaultImage">
          <div class="productInfo fs-sm">
            <div class="fwbold fs16">{{ orderDetail?.productName }}</div>
            <div>联系方式：<span class="color-primary">{{ contactPerson }}({{ contactPhoneNum }})</span></div>
            <div>服务商地址：{{ productInfo?.companyAddress }}</div>
            <div>工作时间：{{ workDate(productInfo?.workDate) }} {{ productInfo?.workBeginTime }} ~ {{ productInfo?.workEndTime }}</div>
          </div>
        </div>
        <el-divider class="divider"></el-divider>
        <div class="pay-info-wrap">
          <template v-if="orderDetail.pricingType !== 2">
            <div class="coupon-wrap">
              <div class="pay-info-box">
                <div class="pay-info-item">
                  <!-- 因为price字段在签订合同才生成，所以做了状态判断来取值 -->
                  <span class="label">服务金额：</span>
                  <!-- <span class="value" v-if="orderStep === 0 || orderStep === 1">{{ $priceFormat(voucherDetail.limitOriginalPrice,voucherDetail.upperOriginalPrice) }}</span> -->
                  <span class="value">{{ $priceToThousands(orderDetail.totalPrice)}}</span>
                  <span>元</span>
                </div>
                <div class="pay-info-item">
                  <span class="label">服务券抵扣：</span>
                  <!-- <span class="value color-red" v-if="orderStep === 0 || orderStep === 1">{{ $priceFormat(voucherDetail.limitDiscountPrice,voucherDetail.upperDiscountPrice) }} </span> -->
                  <span class="value color-red">{{$priceToThousands(orderDetail.discountPrice)}}</span>
                  <span>元</span>
                </div>
              </div>
            </div>
            <div class="pay-money">
              <span class="label">实付金额：</span>
              <!-- <span class="value color-red" v-if="orderStep === 0 || orderStep === 1">{{$priceFormat(voucherDetail.limitPrice, voucherDetail.upperPrice) }}</span> -->
              <span class="value color-red">{{$priceToThousands(orderDetail.price)}}</span>
              <span class="unit">元</span>
            </div>
            <div class="pay-money">
                <span class="label">实付大写金额(人民币)：</span>
                <span class="value color-red">{{ chineseMoney }}</span>
            </div>
          </template>
          <template v-else>
            <div class="tr">
              <div class="pay-info-item">
                <span class="label">服务金额：</span>
                <span class="value color-red" v-if="orderDetail.totalPrice > 0">{{ $priceToThousands(orderDetail.totalPrice) }} 元</span>
                <span class="value color-red" v-else>面议</span>
              </div>
              <div class="pay-info-item mt10">
                <span class="label">服务券补贴：</span>
                <span class="value color-red" v-if="orderDetail.discountPrice > 0">{{$priceToThousands(orderDetail.discountPrice)}} 元</span>
                <span class="value color-red" v-else>{{ productTypeName?.includes('融资担保') ? '50%' : 'LPR*20%' }}</span>
              </div>
              <div class="pay-info-item mt10">
                <span class="label">实付金额：</span>
                <span class="value color-red" v-if="orderDetail.price > 0">{{$priceToThousands(orderDetail.price)}} 元</span>
                <span class="value color-red" v-else>面议</span>
              </div>
            </div>
          </template>
      </div>
        <!-- 合同信息 -->
        <div v-if="orderStep >= 1 && orderStep!= 6" class="block tl">
          <div class="tl">合同信息</div>
          <!-- <div v-if="orderStep === 1" class="fs-sm color-primary">
            <i class="el-icon-warning-outline color-red mr5"></i>等待服务商确认合同金额和上传对应的合同
          </div> -->
          <div class="row-start-col-center">
              <div class="pt20 pl20 tr">
                <div v-if="productTypeName?.includes('设备租赁')" >
                  <div>当期LPR: <span class="fs16 fwbold"><el-input disabled v-model="lpr" style="width: 272px;"/> % </span></div>
                </div>
                <div class="mt10" v-if="orderDetail.pricingType == 2">{{ orderDetail.orderType == 2 ? '服务金额' : '平台销售价' }}：<span class="fwbold">
                  <el-input disabled v-model="contractForm.contactPrice" style="width: 272px;"/> 元</span>
                </div>
                <div class="mt10">{{ orderDetail.orderType == 2 ? '补贴后金额' : '合同总金额(补贴后金额)' }}：<span class="fwbold"><el-input disabled v-model="contractForm.money" style="width: 272px;"/> 元</span></div> 
                <div v-if="orderDetail.orderType == 1" class="mt10">合同定金：<span class="fwbold"><el-input disabled v-model="contractForm.deposit" style="width: 272px;"/> 元</span></div> 
                <div v-if="orderDetail.orderType == 1" class="mt10">合同尾款：<span class="fwbold"><el-input disabled v-model="contractForm.balancePayment" style="width: 272px;"/> 元</span></div> 
              </div>
              <div v-if="orderStep == 1" class="ml50">
                <span>服务合同： </span> <el-button type="primary" @click="signConstractDialog"> 签署合同 <i class="el-icon-view"/> </el-button>
              </div>
              <div v-else class="ml50">
                <span>服务合同： </span> <el-button type="text" @click="downloadFile"> 查看合同 <i class="el-icon-view"/> </el-button>
              </div>
          </div>

        </div>
      <div v-if="orderDetail.pricingType === 1">
          <!-- 支付信息 -->
          <div v-if="orderStep >= 2 && orderStep!= 6" class="block">
            <div class="">支付信息</div>
            <el-form v-if="(orderStep === 2 || orderStep === 3 || orderStep === 4)" :model="payForm" :rules="payRules" ref="payFormRef"
              size="medium">
              <el-form-item label="账户方式:" prop="payType">
                <el-radio-group v-model="payForm.payType">
                  <el-radio :label="1" border>
                    <div class="row-start-col-center" style="display: inline-flex;vertical-align: middle"><i
                        class="el-icon-bank-card color-primary fs20 mr5"></i>对公转账</div>
                  </el-radio>
                </el-radio-group>
                <a href="/主流银行对公转账操作手册.zip" target="_blank" class="download-link ml20">
                  <i class="el-icon-download"></i>
                  下载对公转账操作手册
                </a>
              </el-form-item>
              <div class="tip fs-sm color-grey">对公转账信息：到账后1个工作日内核实并开通，部分银行处理慢会延期，请耐心等待如果转账有问题，我们会主动与你电话联系。</div>

              <el-row :gutter="10" type="flex" justify="space-between">
                <!-- <el-col :span="12">
                  <el-form-item label="账户名称:" prop="accountName">
                    <el-input v-model="payForm.accountName" style="width: 60%;" placeholder="请输入账户名称" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="开户银行:" prop="bankName" label-width="130px">
                    <el-input v-model="payForm.bankName" style="width: 60%;" placeholder="请输入开户银行" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10" type="flex" justify="space-between">
                <el-col :span="12">
                  <el-form-item label="银行账号:" prop="bankAccount">
                    <el-input v-model="payForm.bankAccount" style="width: 60%;" placeholder="请输入银行账号" />
                  </el-form-item>
                </el-col> -->
                <el-col :span="12">
                  <el-form-item label="汇款金额（元）:" prop="fee" label-width="130px">
                    <div class="row-start">
                      <el-input disabled v-model="payForm.feefen" style="width: 60%;" placeholder="请输入汇款金额" />
                      <span v-if="contractForm.count <= 1"><div class="fs14 color-warning"><i class="el-icon-warning" />合同定金</div></span>
                      <span v-else-if="contractForm.count > 1 && contractForm.priceToPay > 0"><div class="fs14 color-warning"><i class="el-icon-warning" />合同尾款</div></span>
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
              <div class="tip fs-sm color-primary">
                <i class="el-icon-warning color-red mr5"></i>
                支付定金后即可开始服务，在完成服务时需要支付尾款
              </div>
              <div class="submit-btn-wrap">
                <el-button type="primary" :loading="confirmLoading" :disabled="contractForm.count > 2 || contractForm.priceToPay === 0" class="submit-btn" @click="confirmPay">确认汇款</el-button>
              </div>
            </el-form>
            <div class="pay-list"  v-if="orderStep >= 2">
            <div class="mt10">支付记录</div>
              <el-table class="mt10" :data="payTable" stripe empty-text="等待买家支付" style="width: 100%">
                  <el-table-column label="序号" type="index"></el-table-column>
                  <el-table-column label="支付时间" prop="payTime">
                      <template slot-scope="{ row }">
                        {{ formatDate(row.payTime) }}
                      </template>
                  </el-table-column>
                  <el-table-column label="支付金额" prop="fee">
                    <template slot-scope="scope">
                      <div class="color-red">{{ $priceToThousands(scope.row.fee) }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column label="合同剩余尾款" prop="balance">
                    <template slot-scope="scope">
                      <div class="color-red">{{ $priceToThousands(scope.row.balance) }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column label="支付状态">
                    <template slot-scope="scope">
                      <div class="color-green">{{ scope.row.payStatus }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column label="支付可关闭时间(之后)">
                    <template slot-scope="scope">
                      <div class="color-green">{{ scope.row.closableTime ? formatDate(scope.row.closableTime) : '--' }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作">
                    <template slot-scope="scope">
                          <el-button size="mini" v-if="scope.row.payStatus === '待支付' && new Date(scope.row.closableTime) < new Date()" type="primary" @click="closeOrder(scope.row.payId)">关闭本笔支付</el-button>
                    </template>
                  </el-table-column>
                </el-table>
            </div>
          </div>
          <!-- 服务过程佐证 -->
          <el-divider class="divider"></el-divider>
          <div v-if="orderStep >= 3" class="block">
            <div>服务过程佐证</div>
            <div class="row-spacea mt10">
                <div class="col-center">
                      <!-- <el-image v-if="orderStep >= 4" :preview-src-list="[startServiceFileUrl]" :src="startServiceFileUrl" style="height:148px" alt="" @error="setDefaultImage"> </el-image> -->
                      <div @click="reviewProofFile(startServiceFileUrl)" class="showMouse color-primary"><i class="el-icon-view"></i>查看文件</div>
                      <div class="mt5">开始服务</div>
                </div>
                  <div class="col-center">
                        <!-- <el-image v-if="orderStep >= 5" :preview-src-list="[inProgressFileUrl]" :src="inProgressFileUrl" style="height:148px" alt="" @error="setDefaultImage"> </el-image> -->
                        <div @click="reviewProofFile(inProgressFileUrl)" class="showMouse color-primary"><i class="el-icon-view"></i>查看文件</div>
                        <div class="mt5">服务中</div>
                  </div>
                  <div class="col-center">
                        <!-- <el-image v-if="orderStep >= 5" :preview-src-list="[serviceCompletedFileUrl]" :src="serviceCompletedFileUrl" style="height:148px" alt="" @error="setDefaultImage"> </el-image> -->
                        <div @click="reviewProofFile(serviceCompletedFileUrl)" class="showMouse color-primary"><i class="el-icon-view"></i>查看文件</div>
                        <div class="mt5">服务完成</div>
                  </div>
            </div>
          </div>
          <!-- 服务评价 -->
          <div v-if="orderStep >= 5 && orderStep!= 6" class="block">
            <div class="">服务评价</div>
            <el-form :model="rateForm" :rules="rateRules" class="mt15" ref="rateFormRef" :disabled="orderStep !== 5"
              size="medium">
              <el-form-item v-if="orderStep == 5" label="评价等级综合评分" prop="starNum" label-width="140px">
                <div class="ml20">
                  <el-rate v-model="rateForm.starNum" allow-half show-text text-color="#F62B00"
                    :colors="['#F62B00', '#F62B00', '#F62B00']" :texts="['不满意', '不太满意', '基本满意', '满意', '非常满意']"></el-rate>
                </div>
              </el-form-item>
              <el-form-item label="评价内容:" prop="comment" label-width="90px">
                <el-input type="textarea" :rows="2" placeholder="请输入评价内容，200字以内" v-model="rateForm.comment"
                  :maxlength="200"></el-input>
              </el-form-item>

              <div class="submit-btn-wrap" v-if="orderStep === 5">
                <el-button type="primary" class="submit-btn" @click="submitEvalute">提交评价</el-button>
              </div>
            </el-form>
          </div>
      </div>

    </div>
    <!-- 需要认证提示 -->
    <el-dialog title="签署合同" :visible.sync="tipVisible" width="800px" custom-class="my-dialog">
        <div class="ml20">
            <div class="mt20 row-start-col-center">
              <div style="width:180px">1. 在线预览合同：</div>
              <el-button :disabled="orderDetail.contractStatus == -1" type="primary" :loading="loading" class="contractButton" @click="downloadFile" >查看合同</el-button>
            </div>
            <div class="mt20 row-start-col-center">
              <div style="width:180px">2. 合同条款确认: </div>
              <el-button type="primary" :disabled="orderDetail.contractStatus != 1" :loading="loading" class="contractButton" @click="agreeContract(true)" >同意</el-button>
              <el-button type="danger" style="margin-left:30px" :disabled="orderDetail.contractStatus != 1" :loading="loading" class="contractButton" @click="agreeContract(false)" >退回修改</el-button>
            </div>
            <div class="mt20 row-start-col-center"><div style="width:180px">3. 确认签署合同：</div>
                <div>
                  <div v-if="!companySealOk || !legalSealOk">
                      <i class="el-icon-warning-outline color-red"></i> 请先前往桂在益企小程序个人中心页申请企业公章和法人签名章。
                  </div>
                  <div class="mt20 ml10">
                    <span v-if="protocolStatus" class="color-primary mr20" >{{orderDetail.companyContractSignStatus == 0 ? '未签署' : '已签署，待服务商签署'}}</span> 
                    <el-button v-else type="primary" class="contractButton" @click="protocolDialogVisible = true">签署合同</el-button>
                    <span v-if="orderDetail.companyContractSignStatus == 0"> <i class="el-icon-warning-outline color-red"></i>请扫码登录桂在益企小程序，完成企业刷脸签署合同。</span>
                  </div>                
                </div>
            </div>
            <div v-if="orderDetail.companyContractSignStatus == 0" class="tc mt20">
                <img src="@/assets/image/miniCode.jpg" class="ml30"  alt="face" style="width: 100px;height: 100px;" /> 
            </div>
        </div>
    </el-dialog>
    <el-dialog title="查看合同" :visible.sync="contactAuthVisible" width="80%" custom-class="my-dialog" top="10" :close-on-click-modal="false">
      <div class="tc">
           <iframe v-if="signUrl" :src="signUrl" frameborder="0" width="100%" height="860px"></iframe>
      </div>
    </el-dialog>
    <!-- 需要认证提示 -->
    <el-dialog title="签署合同" :visible.sync="protocolDialogVisible" width="700px" custom-class="my-dialog" :close-on-click-modal="false">
      <div class="pl50 pr50">
           <div class="fs18 fwbold tc">平台交易须知 </div>
           <div class="ti2 mt20">用券主体和服务商有下列行为之一的，自治区工业和信息化厅有权会同有关单位终止服务券产品交易，要求其退回补贴资金，取消涉事企业领券资格和服务商服务资格，并作为不良信用记录纳入服务档案，情节严重的依法追究相关法律责任。</div> 
           <div class="mt10"> (一)转让、赠送和买卖服务券的;</div>
           <div class="mt10"> (二)转让、转包、分包合同的;</div>
           <div class="mt10"> (三)虚假交易、串通套现，例如伪造服务券合同或提高合同金额等方式的;</div>
           <div class="mt10"> (四)用券主体投诉产生较大不良影响的;</div>
           <div class="mt10"> (五)自查报告和审计报告结果严重不相符的;</div>
           <div class="mt10"> (六)不配合监督和检查的。</div>
           <div class="mt10">
              <el-checkbox v-model="checked">
                    <span class="color-grey">已阅读并同意以上管理办法</span>
              </el-checkbox>
           </div>
           <div class="tc mt30">
              <el-button v-loading="agreeLoading" type="primary" size="medium" class="blue-btn" @click="checkAgreeStatus">下一步</el-button>
           </div>
      </div>
    </el-dialog>
    </div>
  </div>
</template>
<script>
import {getOrderDetail, payForService,listPayRecord,productPrice,evaluateService,downloadContract, priceToPay,agreeContract,fen2uppercase, 
getSignStatus,getProofFile,acceptAgreement,checkAgreement,closePayRecord} from '@/api/homeApi'
import { regFenToYuan,workDate } from '@/utils/index'
import moment from 'moment';
export default {
  props: {
    orderStepProp: {
      type: Number,
      default: 0
    },
    orderId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      moment,
      workDate,
      orderStep: 0,
      // 0-待接单 2-待签合同 3-待支付 4-待服务 5-待评价/待完成 6-已完成
      smesInfo: {
        name: '广西北投软件股份有限公司',
        person: '张三',
        phone: '18633336666',
        address: '广西南宁市良庆区飞云路8号北投大厦2号楼17层'
      },
      productInfo: {
        serviceInfo: '小微企业智慧产销管理系统',
        companyName: '广西交科集团有限公司',
        companyPhone: '18899998888',
        companyAddress: '广西南宁市西乡塘区新康西路158号',
        workTime: '周一至周五 早8点30分-晚5点30分',
        workBeginTime:'',
        workEndTime:'',
      },
      contractForm: {
        contactPrice: 0,
        priceToPay: '',
        file: '',
        deposit:0,
        balancePayment:0,
        count: 1,
        money:0
      },
      payForm: {
        "accountName": "",
        "bankAccount": "",
        "bankName": "",
        "fee": 0,
        "payType": 1
      },
      payRules: {
        payType: [{ required: true, message: '请选择账户方式', trigger: 'blur' }],
        accountName: [{ required: true, message: '请输入账户名称', trigger: 'blur' }],
        bankName: [{ required: true, message: '请输入开户银行', trigger: 'blur' }],
        bankAccount: [{ required: true, message: '请输入银行账号', trigger: 'blur' }],
        fee: [{ required: true, message: '请输入汇款金额', trigger: 'blur' }],
      },
      payTable: [

      ],
      rateForm: {
        starNum: 0,
        comment: '',
        createTime: ''
      },
      rateRules: {
        score: [{ required: true, message: '请选择评分等级', trigger: 'blur' }]
      },
      orderDetail: {},
      voucherDetail:{
        limitDiscountPrice: 0,
        limitOriginalPrice: 0,
        limitPrice: 0,
        upperDiscountPrice: 0,
        upperOriginalPrice: 0,
        upperPrice: 0,
      },
      loading:false,
      confirmLoading: false,
      tipVisible: false,
      chineseMoney: '',
      companySealOk: false,
      legalSealOk: false,
      contactAuthVisible: false,
      signUrl:'',
      startServiceFileUrl:'',
      inProgressFileUrl:'',
      serviceCompletedFileUrl:'',
      protocolDialogVisible: false,
      protocolStatus: 0,
      agreeLoading:false,
      checked:false,
      contactPerson:'',
      contactPhoneNum:'',
      productTypeName:'',
      lpr: 0
    }
  },
  mounted() {
    this.getOrderDetail()
  },
  watch: {
    
  },
  methods: {
    signStatus() {
      getSignStatus().then(res=>{
        if(res.code === 200){
          this.companySealOk = res.data.companySealOk,
          this.legalSealOk = res.data.legalSealOk
        }
      })
    },
    agreeStatus(){
      checkAgreement({orderId:this.orderId}).then(res => {
         if(res.code == 200) {
            this.protocolStatus = res.data.accepted ? 1 : 0
         }
      })
    },
    signConstractDialog() {
      if(this.protocolStatus === 0){
         this.protocolDialogVisible = true
      } else {
         this.tipVisible = true
      }
    },
    setDefaultImage(event) {
        event.target.src = require('@/assets/image/error.jpg');
    },
    reviewProofFile(url) {
      open(url)
    },
    formatDate(date) {
      return moment(date).format('YYYY-MM-DD HH:mm:ss');
    },
    goBack() {
      this.$emit('back')
    },
    checkAgreeStatus() {
      if(this.checked){
        this.agreeLoading = true
        acceptAgreement({orderId:this.orderId}).then(res => {
          if(res.code == 200){
            this.protocolStatus = 1
          }
        })
        .finally(()=>{
           this.protocolDialogVisible = false
           this.agreeLoading = false
        })
      }
    },
      // 获得订单详情
    getOrderDetail() {
      getOrderDetail({orderId:this.orderId}).then(res=>{
        if(res.code === 200){
            this.orderDetail = res.data
            this.productInfo = this.orderDetail.serviceDetail
            this.contactPerson = this.orderDetail?.productDetail?.contactPerson
            this.contactPhoneNum = this.orderDetail?.productDetail?.contactPhoneNum
            this.productTypeName = this.orderDetail?.productDetail?.productTypeName
            this.orderStep = this.orderDetail.status === 6 ? -1 : this.orderDetail.status
            this.orderDetail.productImg = res.data?.productImg.includes('|') ? res.data?.productImg.split('|')[0] : res.data?.productImg;
            this.contractForm.contactPrice = regFenToYuan(this.orderDetail.totalPrice);
             this.lpr = regFenToYuan(res.data.voucherDetail?.lpr?.yearOne)
            if(this.orderDetail.evaluateResp){
              this.rateForm = this.orderDetail.evaluateResp
            }
            // productPrice({productId:this.orderDetail?.productDetail.productId,voucherId:this.orderDetail?.voucherId}).then(res=>{
            //   this.voucherDetail = res.data
            // })
            fen2uppercase({fee:this.orderDetail.price}).then(res=>{
              if(res.code === 200){
                this.chineseMoney = res.data
              }
            })
            if(this.orderStep == 1){
               this.agreeStatus()
               this.signStatus()
            }
            if(this.orderStep >= 1){
               priceToPay({orderId:this.orderId}).then(res=>{
                  this.contractForm.money = regFenToYuan(res.data?.contactPrice)
                  this.contractForm.deposit = regFenToYuan(res.data?.deposit)
                  this.contractForm.balancePayment = regFenToYuan(res.data?.balancePayment);
                  this.contractForm.count = res.data?.count;
                  this.contractForm.priceToPay = res.data?.priceToPay;
                  if(this.contractForm.count === 1) {
                    this.payForm.feefen = regFenToYuan(res.data?.deposit);
                  } else if(this.contractForm.count === 2) {
                    this.payForm.feefen = regFenToYuan(res.data?.balancePayment);
                  } else {
                    this.payForm.feefen = regFenToYuan(res.data?.priceToPay);
                  }
               })
            }
            if(this.orderStep >= 2){
              listPayRecord({orderId:this.orderId}).then(res=>{
                this.payTable = res.data
              })
            }
            if(this.orderStep == 4 ||  this.orderStep == 5 || this.orderStep == 7){
              getProofFile({orderId:this.orderId,fileType:1}).then(res=>{
                  if(res.code === 200){
                    this.startServiceFileUrl = process.env.VUE_APP_BASE_API+`/public/file/v1/temp/get?token=${res.data?.token}`
                  }
              })
            }
            if(this.orderStep == 5 || this.orderStep == 7){
              getProofFile({orderId:this.orderId,fileType:2}).then(res=>{
                  if(res.code === 200){
                    this.inProgressFileUrl = process.env.VUE_APP_BASE_API+`/public/file/v1/temp/get?token=${res.data?.token}`
                  }
              })
              getProofFile({orderId:this.orderId,fileType:3}).then(res=>{
                  if(res.code === 200){
                    this.serviceCompletedFileUrl = process.env.VUE_APP_BASE_API+`/public/file/v1/temp/get?token=${res.data?.token}`
                  }
              })
            }
        }
      })
    },
    agreeContract(flag) {
      // 二次确认
      if(flag === true) {
          this.$confirm('选择同意后，不可再修改附加条款，确定同意吗', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.loading = true
            agreeContract({orderId:this.orderId,accept:true}).then(res=>{
              if(res.code === 200){
                this.$message({
                  type: 'success',
                  message: '确认成功!'
                });
                this.getOrderDetail()
              }
            }).finally(() => {
              this.loading = false
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消确认'
            });
          });
        } else {
           this.$confirm('确认退回修改，让服务商重新修改合同附加条款吗', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
              this.loading = true
              agreeContract({orderId:this.orderId,accept:false}).then(res=>{
                if(res.code === 200){
                  this.tipVisible = false
                  this.getOrderDetail()
                }
              }).finally(() => {
              this.loading = false
            })
           }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            });
          });
      }
    },
    downloadFile() {
       downloadContract({orderId:this.orderId}).then(res=>{
          if(res.code === 200){
            // this.contactAuthVisible = true
            // this.signUrl = process.env.VUE_APP_BASE_API+`/public/file/v1/temp/get?token=${res.data.token}`
            open(process.env.VUE_APP_BASE_API+`/public/file/v1/temp/get?token=${res.data.token}`)
          }
       })
    },
    confirmPay() {
    this.$confirm('1、在平台进行支付操作过程中需要认真核对收款公司是否正确。 2、在本平台操作完成后，需要在30分钟内登陆用户自己的支付账户银行后台操作复核制单。', '注意事项：', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$refs.payFormRef.validate((valid) => {
          if (valid) {
            let params = Object.assign({}, this.payForm, { orderId: this.orderId,fee:this.contractForm.priceToPay })
            this.confirmLoading = true
            payForService(params).then(res => {
              if (res.code === 200) {
                // this.$message.success('支付成功')
                // this.getOrderDetail()
                // this.payForm.feefen = null
                //  listPayRecord({orderId:this.orderId}).then(res=>{
                //     this.payTable = res.data
                //  })
                this.getOrderDetail()
                window.open(res.data)
              }
            }).finally(() => {
              this.confirmLoading = false
            })
          } else {
            return false
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    submitEvalute() {
      this.$refs.rateFormRef.validate((valid) => {
        if (valid) {
          let params = Object.assign({}, this.rateForm, { orderId: this.orderId })
          evaluateService(params).then(res => {
            if (res.code === 200) {
              this.$message.success('评价成功')
              this.getOrderDetail()
            }
          })
        } else {
          return false
        }
      })
    },
    closeOrder(orderId) {
      this.$confirm('确定关闭本笔支付吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        closePayRecord({payId:orderId}).then(res=>{
          if(res.code === 200){
            this.$message.success('关闭成功')
            this.getOrderDetail()
          }
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/element-variables";

:deep(.el-input.is-disabled .el-input__inner){
  color: $--color-danger;
}
:deep(.el-step__title.is-success) {
  color: $text-color;
}

:deep(.el-step__head.is-success) {
  color: $text-color-blue;
  border-color: $text-color-blue;
}

:deep(.el-step__title.is-process) {
  color: $text-color-blue !important;
}

:deep(.el-step__head.is-success .el-step__line-inner) {
  // transition-delay: 0ms;
  border-width: 1px !important;
  width: 100% !important;
}

:deep(.el-step__head.is-process) {
  color: $text-color-blue;
  border-color: $text-color-blue;
}

:deep(.el-step__line-inner) {
  // border-style: dashed;
}

:deep(.el-step__title.is-process) {
  font-weight: 400;
  color: rgb(122, 121, 121);
}

:deep(.el-step__title.is-wait) {
  color: rgb(122, 121, 121);
}


:deep(.el-radio.is-bordered.is-checked) {
  border-color: $--color-primary;
}

:deep(.el-radio__input.is-checked .el-radio__inner) {
  border-color: $--color-primary;
  background: $--color-primary;
}

:deep(.el-radio__input.is-checked+.el-radio__label) {
  color: inherit;
}

:deep(.el-radio--medium.is-bordered) {
  padding-top: 8px;
}

:deep(.el-table th.el-table__cell) {
  background: rgb(242, 242, 242);
}

:deep(.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell) {
  background: rgb(242, 242, 242);
}

:deep(.el-rate__icon) {
  font-size: 1.8rem;
}

:deep(.el-rate) {
  height: fit-content;
}

:deep(.el-textarea.is-disabled .el-textarea__inner) {
  color: inherit;
}

.contractText :deep(.el-input__inner) {
  color: #FF0000;
}

.contractButton{
  width: 120px;
  height: 30px;
  padding: 5px;
}

.ml400 {
  margin: 20px 0 20px 400px;
}


.main-container {
  margin: 12px 30px 30px;
  box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.16);

  .head {
    padding: 10px 22px;
    font-size: 14px;
    background: #F7F8F9;
  }

  .block {
    position: relative;
    padding: 30px;

    &+.block {
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 30px;
        right: 30px;
        display: block;
        height: 1px;
        background-color: #e8e8e8;
      }
    }


    .company-name {
      display: flex;
      align-items: baseline;
    }

    .projectIcon {
      width: 175px;
      height: 111px;
      border-radius: 5px;
    }

    .productInfo {
      margin-left: 30px;

      div+div {
        margin-top: 14px;
      }
    }

    .divider {
      width: 100%;
      margin: 30px auto 30px auto;
    }


    .pay-info-wrap {
      .coupon-wrap {
        margin-top: 17px;
        display: flex;

        .coupon-box {
          position: relative;
          width: 398px;
          height: 82px;
          background: url('~@/assets/image/coupon_bg2.png') no-repeat;
          background-size: auto 100%;
          padding-left: 70px;
          overflow: hidden;

          .year {
            position: absolute;
            top: -12px;
            left: 0;
            font-size: 24px;
            color: #fff;
            font-family: fangsong;
            letter-spacing: 0px;
          }

          .coupon-money {
            margin-top: 14px;
            display: flex;
            align-items: baseline;

            .label {
              position: relative;
              padding-left: 10px;
              font-size: 16px;

              &::before {
                content: '';
                position: absolute;
                top: 8px;
                left: 0;
                display: block;
                width: 5px;
                height: 5px;
                border-radius: 50%;
                background: $--color-danger;
              }
            }

            .value {
              width: 200px;
              font-size: 20px;
              font-weight: bold;
              text-align: right;
            }
          }

          .coupon-time {
            margin-top: 14px;
            display: flex;
            align-items: baseline;
          }
        }

        .pay-info-box {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          justify-content: end;

          .pay-info-item {
            margin-top: 10px;
            padding-right: 25px;

            .label {
              display: inline-block;
              min-width: 80px;
              text-align: right;
            }

            .value {
              display: inline-block;
              min-width: 150px;
              text-align: right;
            }
          }
        }
      }

      .pay-money {
        margin-top: 13px;
        padding: 10px 25px;
        min-height: 50px;
        background: #F7F8F9;
        text-align: right;

        .label {
          display: inline-block;
          min-width: 80px;
          text-align: right;
        }

        .value {
          display: inline-block;
          padding-right: 5px;
          min-width: 150px;
          text-align: right;
          font-size: 24px;
          font-weight: bold;
        }
      }
    }

    .contractInput {
      min-width: 200px;
      height: 28px;
      text-align: center;
      line-height: 28px;
      background: rgba(204, 204, 204, 0.2);
      border: 1px solid rgb(187, 187, 187);
      border-radius: 3px;
    }

    .upload-btn {
      border: 1px solid #CFCFCF;
      background: #FFFFFF;
      color: $--color-primary;
      width: 265px;
    }

    .tip {
      margin: 0 0 18px 0;
    }

    .submit-btn-wrap {
      text-align: center;

      .submit-btn {
        min-width: 150px;
      }
    }

    .pay-list {
      margin-top: 30px;
    }
  }
}
.download-link {
  color: #436AF7;  /* 使用主题蓝色 */
  text-decoration: none;
  
  &:hover {
    text-decoration: underline;
  }

  .el-icon-download {
    margin-right: 4px;
  }
}
</style>
